<template>
    <view class="uni-flex-column search-content">
        <view style="flex: 1;">       
            <view class="uni-input-group">
                <view class="uni-input-row">
                    <p class="row-title">流程名称</p>
                    <view class="uni-list row-body row-body-no-border row-body-radio">
                        <radio-group @change="onChange">
							<label v-for="(item, index) in options" :key="item.defKey">
								<view class="uni-list-cell uni-list-cell-pd row-radio-left">
								    <radio :value="item.defKey" :checked="item.defKey === selectValue"/>
								    {{item.name}}
								</view>
							</label>
						</radio-group>
                    </view>
                </view>
            </view>
			<view class="uni-input-group">
				<view class="uni-input-row">
					<p class="row-title">创建时间</p>
					<input class="uni-input row-body row-body-input" @click="showDateTimeStart" placeholder="请选择"
						:value="form.startTime"/>
					<w-picker
						mode="date" 
						:visible.sync="datePicker.visible"	
						:value="form.startTime"
						:endYear="'2099'"
						fields="day"
						:second="false"
						:current="false"
						@confirm="onConfirmStart"
						>
					</w-picker>
					<text class="row-space">-</text>
					<input class="uni-input row-body row-body-input" @click="showDateTimeEnd" placeholder="请选择" :value="form.endTime"/>
					<w-picker
						mode="date" 
						:visible.sync="datePicker2.visible"	
						:value="form.endTime"
						:endYear="'2099'"
						fields="day"
						:second="false"
						:current="false"
						@confirm="onConfirmEnd"
						>
					</w-picker>
				</view>
			</view>
        </view>
       <view class="search-btn">
           <button class="landing" type="primary" :disabled="false" style="width:50%;" @click="onOk">确认</button>
           <button class="landing" type="warn" :disabled="false" style="width: 50%;" @click="onCancel">取消</button>
       </view>
    </view>
</template>
<script>
   	import wPicker from '@/components/datePicker/w-picker'
	import { getFlowDefinition } from '@/api/flow.js'
	
    export default {
        components: {
            wPicker
        },
        data() {
            return {
                options: [],       
				selectValue: '',
				selectName: '',
                form: {
                    startTime: '',
                    endTime: ''
                },
				datePicker : {
					visible: false
				},
				datePicker2: {
					visible: false
				},
            };
        },
        onLoad() {
			getFlowDefinition().then(res=>{
				this.options = res.data.dataResult
			})
		},
        methods: {
			onOk() {
				const { form } = this
				uni.redirectTo({
					url: `/pages/flow/index?processName=${this.selectName}&processKey=${this.selectValue}&startTime=${form.startTime}&endTime=${form.endTime}`
				})
			},
			onCancel() {
				uni.navigateBack()
			},
			showDateTimeStart() {
				this.datePicker.visible = true
			},
			showDateTimeEnd() {
				this.datePicker2.visible = true
			},
			onConfirmStart(e) {
				this.form.startTime = e.result;
			},
			onConfirmEnd(e) {
				this.form.endTime = e.result;
			},
			onChange(e) {
				this.selectValue = e.detail.value
				this.selectName = this.options.find(item=>{
					return item.defKey === e.detail.value;
				}).name;
			}
        }
    };
</script>
<style lang="scss">
    @import '@/themes/common-search.scss';
</style>
